<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }

  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-cells {
    margin-top: 0;
  }

  .weui-cells_form {
    background: #fbfbfb;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
  }

  .oitem {
    padding: 3px;
  }

  .hide {
    display: none;
  }

  #acts {
    font-size: 0;
  }

  #acts span {
    font-size: 14px;
  }

  .halfbtn {
    display: inline-block;
    width: 49%;
  }

  .weui-label {
    text-align: left;
  }

  .time {
    border: none;
    font-size: 17px;
  }

  .weui-cell_select {
    padding: 10px 15px;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }


  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }

  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .weui_uploader_files {
    list-style: none;
  }

  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }

  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }

  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }

  .weui_uploader_bd {
    overflow: hidden;
  }

  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }

  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }

  .weui-cell.fir {
    border-top: 0;
  }

  .help {
    text-align: right;
    padding: 5px;
    font-size: 12px;
    color: #bbb;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }

  .addPur >>> .ui.selection.dropdown {
    border: none;
  }
  .addPur >>> .ui.dropdown .menu>.item {
    font-size: 18px;
  }
  .addPur >>> .ui.search.dropdown>.text {
    font-size: 18px;
  }

  /*.addPur >>> .ui.search.dropdown>.text {*/
  /*  line-height: 20px;*/
  /*}*/
</style>
<template>
  <div class="addPur" style="overflow: hidden;">
    <div
      style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      修改客户信息
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="cellgroup">
          <div class="weui-cell weui-cell-select">
            <div class="weui-cell__hd"><label class="weui-label">部门</label></div>
            <div class="weui-cell__bd">
              <input type="hidden" name="deptId" :value="depart.deptId" />
              <input type="hidden" name="deptName" :value="depart.deptName" />
              <select class="weui-select" v-model="depart">
                <option value="" disabled>请选择</option>
                <option v-for="(item, index) in departments" :key="item.deptId" :value="item">
                  {{item.deptName}}
                </option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell-select">
            <div class="weui-cell__hd"><label class="weui-label">客户类型</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="flag" v-model="ctype">
                <option selected="" v-for="(item, index) in cusTypes" :value="item.dictValue">{{item.dictLabel}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="name" v-model="customer.name" placeholder="请输入客户名称">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货城市</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="endCity" name="province" v-model="addrs" placeholder="请选择收货城市" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="address" v-model="customer.address" placeholder="请输入收货详细地址">
            </div>
          </div>
          <div class="weui-cell weui-cell-select">
            <div class="weui-cell__hd"><label class="weui-label">结算币种</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="currency" v-model="customer.currency">
                <option value="1">人民币</option>
                <option value="2">美元</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">商务人员</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="manager" v-model="customer.manager" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">商务电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="managertel" v-model="customer.managertel" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">商务邮箱</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="memail" v-model="customer.memail" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">财务人员</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="financer" v-model="customer.financer" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">财务电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="fintel" v-model="customer.fintel" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">财务邮箱</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="finemail" v-model="customer.finemail" placeholder="请输入" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">注册资金</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" style="width: 55%;display: inline-block;" type="number" name="registcapital" v-model="customer.registcapital" />
              <input class="weui-input" style="width: 40%;display: inline-block;" type="text" value="万元" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货联系人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="contact" name="contact" v-model="customer.contact" placeholder="请输入收货联系人">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="contactno" name="contactno" v-model="customer.contactno" placeholder="请输入收货联系人电话">
            </div>
          </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary subbtn" href="javascript:" @click="postForm()">提交</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import qs from 'qs';

  export default {
    name: 'EditCustomer2',
    data() {
      return {
        id: '',
        customer: '',
        departments: [],
        depart: '',
        cusTypes: [],
        model: {
        },
        ctype: 2,
        customer: {
          name: '',
          province: '',
          address: '',
          currency: '',
          manager: '',
          managertel: '',
          memail: '',
          financer: '',
          fintel: '',
          finemail: '',
          registcapital: '',
          contract: '',
          contractno: '',
        },
        addrs: ''
      }
    },
    async mounted() {
      let that = this;
      this.id = this.$route.query.id;
      $("#endCity").cityPicker({
        title: "请选择收货地址",
        onChange: function (data) {
          let addr = data.displayValue;
          console.log('addr:', addr)
          that.addrs = addr.join(" ");
        }
      });
      await this.getCustomer();
      this.getDepartment();
      this.getCusTypes();
    },
    methods: {
      getCustomer: async function () {
        // this.customer = {"id":1319,"code":"CM220533","orgId":null,"toOrgId":null,"deptId":null,"status":-1,"condition":null,"createName":"李瑞军采收","createBy":881,"updateBy":null,"createTime":null,"updateTime":null,"remark":null,"businessType":null,"baseItems":null,"cusCtractId":null,"projectId":null,"projId":null,"supplierId":null,"fullName":null,"params":null,"busTable":null,"orgFlag":null,"keyword":null,"operation":null,"guid":"cc12597bd8bf400db02d336ad993824b","name":"张三","allname":null,"province":"内蒙古自治区","city":"呼和浩特市","district":"赛罕区","address":"银联大厦","manager":null,"managertel":null,"contact":"张三","contactno":"123333333333","operatorid":"FBABD65FFCE34BD8AF9C9E2255145BF1","legal":null,"memail":null,"financer":null,"fintel":null,"finemail":null,"registcapital":null,"prebalance":0.00,"recbalance":0.00,"operator":"李瑞军采收","paybalance":0.00,"currency":1,"type":1,"currprebalance":null,"nocurrprebalance":null,"flag":2,"kingdeenum":null,"synchtime":null,"synchinfo":null,"synchstat":null,"createtime":"2022-05-23","orgguid":null,"statusList":null,"orgname":null,"statusname":null,"flowid":29,"deptName":null,"reciever_id":null,"isdiscount":2,"baseinfo":{"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"guid":"080636ce4c754bd8a6ef14b42879f022","customerid":"cc12597bd8bf400db02d336ad993824b","warehousearea":null,"truckcount":null,"saletarget":null,"category":null,"operatorid":"FBABD65FFCE34BD8AF9C9E2255145BF1","operator":"李瑞军采收","createtime":"2022-05-23T10:33:43.000+0800"},"financeinfo":{"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"guid":"c5910e145a734867b6d31de961e73b54","customerid":"cc12597bd8bf400db02d336ad993824b","invoicingtype":null,"invoicingtel":null,"creditcode":null,"bankcode":null,"bankname":null,"cardcode":null,"cardname":null,"address":null,"licensecode":null,"orgcode":null,"operatorid":"FBABD65FFCE34BD8AF9C9E2255145BF1","operator":"李瑞军采收","createtime":"2022-05-23T10:33:43.000+0800"},"receivableflows":[],"cashflows":[],"depids":null,"search":null,"flagName":null,"nodes":null,"className":"Customer"}
        this.addrs = this.customer.province + ' ' + this.customer.city + ' ' + this.customer.district;
        await this.axios({
          method: 'get',
          url: '/prod-api/customer/customer/detail',
          params: {id: this.id}
        }).then(response => {
          if (response.data.code == 200) {
            let res = response.data;
            this.customer = res.data;
            this.addrs = this.customer.province + ' ' + this.customer.city + ' ' + this.customer.district;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError('系统错误');
          }
        });
      },
      getDepartment: function () {
        let that = this;
        this.axios({
          method: 'get',
          url: '/prod-api/getDepsByPermissionCode',
          params: {code: 2}
        }).then(response => {
          if (response.data.code == 200) {
            that.departments = response.data.data;
            this.depart = that.departments.find(item => item.deptId == this.customer.deptId);
          }  else {
            this.toastText('获取部门数据失败');
          }
        });
      },
      getCusTypes: async function() {
        let that = this;
        await this.axios({
          method: 'get',
          url: '/prod-api/system/dict/data/type/cust_type',
        }).then(response => {
          if (response.data.code == 200) {
            that.cusTypes = response.data.data;
          } else {
            this.toastText('获取客户类型数据失败');
          }
        });
      },
      //提交表单数据
      postForm: function () {
        let that = this;
        //表单校验
        if (!this.checkFormElm()) {
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");
        let postData = this.serialize2Obj($("#formid").serializeArray());
        postData.id = this.id;
        this.axios({
          method: 'post',
          url: `/prod-api/customer/customer/save`,
          data: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.code == 200) {
            this.toastSuccess("保存成功");
            this.$router.push({name: 'CustomerList2'});
          } else {
            this.toastError('系统错误');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      },
      checkFormElm: function () {
        if ($('input[name="name"]').val() == '') {
          this.toastText('请输入客户名称！');
          return false;
        } else if ($('input[name="province"]').val().length > 50) {
          this.toastText('客户名称太长，不符合系统要求！');
          return false;
        } else if ($('input[name="province"]').val() == '') {
          this.toastText('请选择收货城市！');
          return false;
        } else if ($('input[name="address"]').val() == '') {
          this.toastText('请输入详细地址！');
          return false;
        } else if ($('input[name="address"]').val().length > 200) {
          this.toastText('详细地址太长，不符合系统要求！');
          return false;
        } else if ($('input[name="contact"]').val() == '') {
          this.toastText('请输入收货联系人！');
          return false;
        } else if ($('input[name="contact"]').val().length > 30) {
          this.toastText('收货联系人太长，不符合系统要求！');
          return false;
        } else if ($('input[name="contactno"]').val() == '') {
          this.toastText('请输入收货联系人电话！');
          return false;
        } else if ($('input[name="contactno"]').val().length > 25) {
          this.toastText('联系人电话太长，不符合系统要求！');
          return false;
        }
        return true;
      }
    }
  }
</script>
